<script setup lang="ts" >
import { trainingListApi } from '@/api/training/training';
import { onMounted, ref } from 'vue';
import type { TrainingResp } from '@/types/training';
import router from '@/router';


const trainingList = ref<TrainingResp[]>()

const name = ref<string>()

const findList = async () => {
    const res = await trainingListApi(name.value)
    trainingList.value = res.data
}

const handleClickTraining = (trainingId: number) => {
    router.push({ name: 'Training', params: { trainingId } })
}

onMounted(() => {
    findList()
})
</script>

<template>
    <div class="home">
        <el-container>
            <el-header>{{  }}</el-header>
            <el-main>
                <div class="content">
                    <el-card v-for="item in trainingList" :key="item.trainingId">
                        <img :src="item.image" class="image" />
                        <div style="padding: 14px">
                            <p class="title">{{ item.name }}</p>

                            <div class="bottom">
                                <span class="description">{{ item.description
                                }}</span>
                                <el-button type="primary" @click="handleClickTraining(item.trainingId)">进入实训</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>

            </el-main>
        </el-container>

    </div>
</template>
<style lang="scss" scoped>
.home {
    .el-header {
        height: 40px;
        background-color: aquamarine;
    }

    .el-main {
        width: 100%;
        height: calc(100vh - 40px);
        overflow-y: auto;

        .content {
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;

            // Define breakpoints and widths
            $breakpoints: 1300px 2000px 2400px 2800px 3200px;
            $widths: 800px 1200px 1600px 2000px 2400px 2800px;

            @media only screen and (max-width: nth($breakpoints, 1)) {
                width: nth($widths, 1);
            }

            @for $i from 2 through length($breakpoints) {
                @media only screen and (min-width: nth($breakpoints, $i - 1)) and (max-width: nth($breakpoints, $i)) {
                    width: nth($widths, $i);
                }
            }

            @media only screen and (min-width: nth($breakpoints, length($breakpoints))) {
                width: nth($widths, length($widths));
            }

            .el-card {
                width: 380px;
                height: 280px;
                margin: 20px 10px;


                .title {
                    font-size: 20px;
                    font-weight: 700;
                    padding-bottom: 5px;
                }

                .bottom {
                    display: flex;

                    span {
                        flex: 1;
                        display: -webkit-box;
                        font-size: 14px;
                        color: #2d2e30;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }

                .image {
                    width: 100%;
                    height: 180px;
                    display: block;
                }
            }
        }
    }
}
</style>

